<template>
	<view class="videobox">
		<go-top v-if="!fullScreen" :scrollTop="scrollTop"></go-top>
		<view class="showbox">
			<view class="tabs" v-if="!fullScreen">
				<view class="onetab" @click="tabchange(0)"><text :class="isactive==0?'active':''">关注</text>
					<image src="/static/img/half.png" mode="widthFix" v-if="isactive==0"></image>
				</view>
				<view class="onetab" @click="tovideo"><text :class="isactive==1?'active':''">短视频</text>
					<image src="/static/img/half.png" mode="widthFix" v-if="isactive==1"></image>
				</view>
				<view class="onetab" @click="tabchange(2)"><text :class="isactive==2?'active':''">头条</text>
					<image src="/static/img/half.png" mode="widthFix" v-if="isactive==2"></image>
				</view>
			</view>

			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll" :style="'height:'+windowHeight+'px'">
				<view class="scroolbox">
					<view class="shopscontents">
						<block v-for="(item,index) in list" :key="index">
							<view class="onenews">
								<navigator :url="'/home/station/stationpage?id='+item.senduid" hover-class="none">
									<image :src="item.shop_logo==''?item.avatar:item.shop_logo" mode="aspectFill"
										class="imghead"></image>
								</navigator>
								<view class="newsinfo">
									<view class="flex_bet_align">
										<view class="">
											<view class="namedes" @click="todetail(item.id,item.senduid,index)">
												<text>{{item.nickname}}</text>
												<image :src="item.mimage" v-if="item.mimage" mode="heightFix"></image>
												<view class="xinyong_box">
													<view class="xin">信</view>
													<view class="xin_number">{{item.credit_value}}</view>
													<view class="shiming" v-if="item.realname">实</view>
													<view class="qiye" v-if="item.enterprise">企</view>
												</view>
											</view>
											<view class="times" @click="todetail(item.id,item.senduid,index)">
												<text>{{item.createtime}}</text>
											</view>
											<view class="times" @click="todetail(item.id,item.senduid,index)">
												<text class="add clamp1">{{item.city}}</text>
											</view>
										</view>
										<view @click="attention(item)"
											:class="item.is_follow?'attention opt':'attention'">
											{{item.is_follow?'已关注':'+ 关注'}}
										</view>
									</view>

									<view class="newscontent clamp3" v-if="item.content"
										@click="todetail(item.id,item.senduid)">{{item.content}}</view>

									<view class="" style="height: 360rpx;" v-if="item.type==2">
										<view class="videos blackbord" v-if="item.lookimg" @click="lookvideo(item)">
											点击加载视频...
										</view>
										<video v-if="item.state" :src="item.video[0]" controls class="videos"
											direction="90" @fullscreenchange="fullscreenchange"></video>
									</view>


									<view v-else class="photobox">
										<block v-if="item.images.length>1">
											<u-row gutter="12">
												<u-col span="4" v-for="(item2,index2) in item.images" :key="index2">
													<image :src="item2" @click="$plug.showImg(item.images,item2)"
														mode="aspectFill"></image>
												</u-col>
											</u-row>
										</block>
										<block v-if="item.images.length==1">
											<image class="bigimg" :src="item.images[0]"
												@click="$plug.showImg(item.images,item.images[0])" mode="aspectFill">
											</image>
										</block>
									</view>
									<view class="friendseach">
										<view class="eachone" @click="todetail(item.id,item.senduid,index)">
											<u-icon name="eye-fill" color="#666666" size="36"></u-icon>
											<text>{{item.view}}</text>
										</view>
										<view class="eachone" :class="item.is_dz?'opt':''"
											@click="praise(item.id,index)">
											<u-icon name="thumb-up-fill" :color="item.is_dz?'#FE524B':'#666666'"
												size="36">
											</u-icon>
											<text>{{item.dz_num}}</text>
										</view>
										<view class="eachone" @click="todetail(item.id,item.senduid,index)">
											<u-icon name="chat-fill" color="#666666" size="36"></u-icon>
											<text>{{item.pl_num}}</text>
										</view>
										<view class="eachone" @click="todetail(item.id,item.senduid,index)">
											<u-icon name="share-fill" color="#666666" size="36"></u-icon>
											<text>分享</text>
										</view>
									</view>
									<view class="detailcometbox" @click="todetail(item.id,item.senduid,index)">
										<block v-for="(item2,index2) in item.comment" :key="index2">
											<view class="detailcometone" v-if="index2<2">
												<text>{{item2.nickname}}</text>：{{item2.content}}
											</view>
											<view class="special" v-if="index2==1">
												<text>{{item2.nickname}}</text>：{{item2.content}}
											</view>
										</block>
										<!-- <view class="more">查看更多  <u-icon name="arrow-right-double" color="#00C575" size="28"></u-icon></view> -->
									</view>
								</view>

							</view>
						</block>

						<view class="not_more" v-if="list.length<1">
							<image src="/static/img/wxiaoxi.png" mode="widthFix"></image>
							<view class="text">暂无{{isactive==0?'关注':'头条'}}</view>
						</view>
						<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>

					</view>
					<view class="submitbox" @click="gosubmit">
						<u-icon name="twitter" color="#FFFFFF" size="28"></u-icon>
						<text>发布</text>
					</view>
				</view>
			</scroll-view>

		</view>
		<pagetabbar v-if="!fullScreen" :currentIndex="currentIndex"></pagetabbar>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				currentIndex: 1,
				navH: 0,
				isactive: 0,
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
				// 视频是否全屏
				fullScreen: false,
				old: {
					scrollTop: 0
				},

				// showv: false,
				// lookimg: true,
				windowHeight: 0,

			}
		},
		onLoad(options) {
			_this = this
			_this.isactive = options.isactive ? options.isactive : 0
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)

			var deviceInfo = uni.getSystemInfoSync();
			_this.windowHeight = deviceInfo.safeArea.height
			console.log(deviceInfo)
		},
		onShow() {
			//点赞接收传的参数
			uni.$once('updateData', this.updateData)
			if (_this.is_follow != '' || _this.senduid != '') {
				console.log(_this.is_follow, _this.senduid)
				let list = _this.list
				for (let i of list) {
					if (_this.senduid == i.senduid) {
						if (_this.is_follow == 0) {
							i.is_follow = false
						} else {
							i.is_follow = true
						}
					}
				}
				_this.list = list
			}
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},

		//下拉刷新
		// onPullDownRefresh() {
		// 	$paginator = new _this.$paginator(_this.$api)
		// 	_this.getdata(true)
		// },

		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			updateData(e) {
				_this.list[e.curindex].is_dz = e.guanzhu

				if (e.guanzhu == 1) {
					_this.list[e.curindex].dz_num = _this.list[e.curindex].dz_num + 1
				} else {
					_this.list[e.curindex].dz_num = _this.list[e.curindex].dz_num - 1
				}

				console.log(e, _this.list)
			},
			getdata: function(firstLoad = false) {
				let url = ""
				if (_this.isactive == 0) {
					url = "getmyfollow"
				}
				if (_this.isactive == 2) {
					url = "headlines"
				}
				console.log(_this.isactive)
				$paginator.getData(url, {
					uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : 0,
				}, (data) => {
					data.list.forEach((item, index) => {
						item.state = false
						item.lookimg = true
					});

					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore

				})
			},
			tabchange: function(isactive) {
				_this.list = []
				_this.isactive = isactive
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},

			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
				// _this.showv = false
				// _this.lookv = true

				_this.list.forEach((item, index) => {
					item.state = false
					item.lookimg = true
				});
			},

			// 
			tovideo: function() {
				uni.redirectTo({
					url: '/pages/community/index?isactive=1'
				})
			},

			// 点击播放视频
			lookvideo(item) {
				console.log(item)
				item.state = true
				item.lookimg = false
			},

			// 跳转到发布
			gosubmit() {
				_this.$api.islogin(() => {
					uni.navigateTo({
						url: "/home/submit/submit"
					})
				})
			},
			// 跳转到详情
			// 跳转到详情
			todetail: function(id, senduid, index) {
				uni.navigateTo({
					url: "/home/station/newsdetail?id=" + id + "&senduid=" + senduid + "&curindex=" + index
				})
			},
			// 点赞
			praise(id, index) {
				_this.$api.islogin(() => {
					_this.$api.get("savefabulous", {
						select_type: 1,
						id: id
					}).then(data => {
						if (_this.list[index].is_dz) {
							_this.list[index].is_dz = false
							_this.list[index].dz_num = parseInt(_this.list[index].dz_num) - 1
						} else {
							_this.list[index].is_dz = true
							_this.list[index].dz_num = parseInt(_this.list[index].dz_num) + 1
						}
					});
				})
			},
			// 关注
			attention(e) {
				_this.$api.islogin(() => {
					_this.$api.get("savefollow", {
						select_type: 2,
						id: e.senduid
					}).then(data => {
						let list = _this.list
						for (let i of list) {
							if (e.senduid == i.senduid) {
								i.is_follow = i.is_follow ? false : true
								console.log(i.senduid, i.is_follow)
							}
						}
						_this.list = list

						if (_this.isactive == 0) {
							$paginator = new _this.$paginator(_this.$api)
							_this.getdata(true)
						}
					});
				})
			},
			// 视频全屏的时候切换
			fullscreenchange(e) {
				_this.fullScreen = e.detail.fullScreen
			}
		}
	}
</script>

<style lang="scss" scoped>
	.videobox {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.showbox {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

			.tabs {
				padding: 106rpx 0 38rpx 0;
				background-color: #38BE8C;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: sticky;
				top: 0;
				z-index: 99;

				.onetab {
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					text {
						color: #fff;
						font-size: 32rpx;
					}

					.active {
						font-size: 36rpx;
						font-weight: bold;
					}

					image {
						margin-top: 13rpx;
						width: 45rpx;
						height: auto;
						position: absolute;
						bottom: -40rpx;
					}
				}
			}

			.scroolbox {
				flex: 1;
				// display: flex;
				// flex-direction: column;
				background-color: #fff;
				width: 100%;
				// position: relative;

				.shopscontents {
					// flex: 1;
					// display: flex;
					padding: 0 26rpx;
					// flex-direction: row;
					// flex-wrap: wrap;
					padding-bottom: 24rpx;
					// justify-content: space-between;
					// overflow-y: auto;

					.namebox {
						padding: 18rpx 12rpx 10rpx 12rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						.shim {
							width: 48rpx;
							height: 36rpx;
							background: #86cfff;
							border-radius: 10rpx 0;
							color: #fff;
							font-size: 20rpx;
							line-height: 36rpx;
							text-align: center;
						}

						.yu {
							width: 48rpx;
							height: 36rpx;
							background: #ffbc53;
							border-radius: 10rpx 0;
							color: #fff;
							font-size: 20rpx;
							line-height: 36rpx;
							margin-left: 4rpx;
							text-align: center;
						}

						text {
							margin-left: 14rpx;
							flex: 1;
							color: #333333;
							font-size: 28rpx;
						}
					}

					.pricebox {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						padding: 0 12rpx;

						.price {
							color: #ff001f;
							font-size: 28rpx;
							font-weight: bold;
						}

						text {
							color: #666666;
							font-size: 20rpx;
						}
					}

					.locations {
						margin-top: 10rpx;
						color: #666666;
						font-size: 20rpx;
						padding: 0 12rpx;
					}
				}

				.onenews {
					width: 100%;
					display: flex;
					flex-direction: row;
					margin-top: 38rpx;

					.imghead {
						width: 92rpx;
						height: 92rpx;
						border-radius: 50%;
					}

					.newsinfo {
						display: flex;
						flex-direction: column;
						flex: 1;
						margin-left: 30rpx;

						.namedes {
							display: flex;
							flex-direction: row;
							align-items: center;
							flex: 1;
							margin-right: 10rpx;

							text {
								color: #333333;
								font-size: 32rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								max-width: 300rpx;
							}

							image {
								max-width: 120rpx;
								height: 36rpx;
								margin-left: 12rpx;
							}

							.xinyong_box {
								display: flex;
								flex-direction: row;
								align-items: center;
								margin-left: 8rpx;

								.xin {
									width: 30rpx;
									height: 30rpx;
									background: #00C575;
									border-radius: 3px 0 0 3rpx;
									text-align: center;
									line-height: 30rpx;
									color: #fff;
									font-size: 20rpx;
								}

								.xin_number {
									background-color: #fff;
									border: 2rpx solid #00C575;
									border-radius: 0 3rpx 3rpx 0;
									color: #00C575;
									font-size: 20rpx;
									text-align: center;
									height: 30rpx;
									line-height: 30rpx;
									width: 50rpx;
									text-align: center;
								}
							}
						}

						.attention {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 107rpx;
							background: #38be8c;
							border-radius: 40rpx;
							text-align: center;
							border: 1rpx solid #38be8c;
							padding: 6rpx 0;
							font-size: 26rpx;
							color: #FFFFFF;
						}

						.attention.opt {
							color: #38be8c;
							background-color: #FFFFFF;
						}

						.times {
							margin-top: 10rpx;
							display: flex;
							flex-direction: row;
							align-items: center;

							text {
								color: #666666;
								font-size: 24rpx;
							}

							.add {
								max-width: 300rpx;
							}
						}

						.newscontent {
							margin-top: 20rpx;
							color: #333333;
							font-size: 28rpx;
							font-weight: bold;
						}

						.photobox {
							margin-top: 30rpx;

							image {
								width: 159rpx;
								height: 159rpx;
								border-radius: 5rpx;
							}

							.bigimg {
								width: 400rpx;
								height: 300rpx;
							}
						}

						.videos {
							margin-top: 30rpx;
							width: 100%;
							height: 340rpx;
						}

						.blackbord {
							background: #000000;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 36rpx;
						}

						.friendseach {
							padding: 30rpx 10rpx 10rpx 10rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;

							.eachone {
								display: flex;
								flex-direction: row;
								align-items: center;
								width: 25%;

								text {
									color: #666666;
									font-size: 28rpx;
									margin-left: 10rpx;
								}

								&.opt {
									text {
										color: #FE524B;
									}
								}
							}
						}

						.detailcometbox {
							margin-top: 34rpx;
							background-color: #F8F8F8;
							display: flex;
							flex-direction: column;
							width: 100%;

							text {
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								max-width: 150rpx;
								display: inline-block;
								float: left;
							}

							.detailcometone {
								padding: 8rpx 19rpx;
								color: #666666;
								font-size: 24rpx;
							}

							.more {
								text-align: center;
								color: #00C575;
								font-size: 26rpx;
								line-height: 33rpx;
								border: 1rpx solid #00C575;
								padding: 10rpx;
								width: 200rpx;
								margin: 20rpx auto 30rpx;
								border-radius: 40rpx;
							}

							.special {
								padding: 8rpx 19rpx;
								color: #666666;
								font-size: 24rpx;
								background-image: linear-gradient(180deg, #666666 0, #F8F8F8 80%, #F8F8F8 100%);
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								height: 60rpx;
								overflow: hidden;
							}
						}
					}
				}

				.submitbox {
					position: fixed;
					width: 84rpx;
					height: 84rpx;
					background: #707070;
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					right: 43rpx;
					bottom: 420rpx;

					text {
						color: #fff;
						font-size: 20rpx;
						margin-top: 7rpx;
					}
				}
			}
		}
	}
</style>
